<template>
  <div id="app">
    <Header notab="findUser"/>
    <div class="contentWeb">
      <div class="joinSearch clear">
        <div class="searchsele">
          <el-cascader style="width: 200px" popper-class="popSelect" :loading="hangyeLoading"  :options="hangyelist" @change="getpeopleList(1)" placeholder="所属行业" v-model="search.specialty"
            :show-all-levels="false" :props="{value: 'name', label: 'name', children: 'contentSet'}"></el-cascader>
        </div>
        <div class="searchsele">
          <el-select style="width: 180px" popper-class="popSelect" v-model="search.experience" :loading="yearLoading" @change="getpeopleList(1)" placeholder="工作年限">
            <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName + ''"
                       v-for="(item, index) in yearlist"></el-option>
          </el-select>
        </div>
        <div class="searchsele">
          <el-select style="width: 180px" popper-class="popSelect" v-model="search.education" :loading="xueliLoading" @change="getpeopleList(1)" placeholder="学历">
            <el-option :label="item.subTypeName" :key="index" :value="item.subTypeName"
                       v-for="(item, index) in xuelilist"></el-option>
          </el-select>
        </div>
        <div class="searchsele">
          <el-select style="width: 100px" popper-class="popSelect" v-model="search.sex" @change="getpeopleList(1)" placeholder="性别">
            <el-option :label="item.label" :key="index" :value="item.value"
                       v-for="(item, index) in sexlist"></el-option>
          </el-select>
        </div>
        <div class="searchsele">
          <el-select style="width: 130px" popper-class="popSelect" v-model="search.age" @change="getpeopleList(1)" placeholder="年龄">
            <el-option :label="item.label" :key="index" :value="item.value"
                       v-for="(item, index) in agelist"></el-option>
          </el-select>
        </div>
      </div>
      <div class="listcount">共有<span>{{total}}个</span>符合条件的求职者</div>
      <div class="jobcontent clear">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in peopleList" :key="index" style="cursor: pointer;">
            <div class="qiuzhizheK clear"  @click="todetail(item.userUid)" >
              <div class="photo">
                <img :src="item.header">
              </div>
              <div class="letfname">
                <h3>{{item.name}}</h3>
                <div class="desc">
                  <span><b>{{item.sex == 1 ? '男' : item.sex == 2 ? '女' : '保密'}}</b></span>
                  <span>{{item.age}}</span>
                  <span><b>{{formatYear(item)}}</b></span>
                </div>
                <div class="desc" style="color: #999; padding-bottom: 5px;">现住{{item.liveAddress}}</div>
                <div class="ms" >
                  <p style="overflow: hidden; height:26px"><img src="../../assets/img/zhiwei.png">{{item.jzyy}}</p>
                  <p style="overflow: hidden; height:26px"><img src="../../assets/img/hangy.png">{{item.specialty}}</p>
                </div>

              </div>
            </div>
          </el-col>
        </el-row>
        <Noview v-if="total==0"/>
        <div style="text-align: center;" v-if="total> 0">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="onPageChange"
            :current-page="search.pageNum"
            :page-size="search.pageSize"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
    <Footer/>
  </div>
</template>
<script type="text/babel">
// @ is an alias to /src
import Header from '../../components/header'
import Footer from '../../components/footer'
import mt from '../../assets/img/mt.png'
import hblad from '../../assets/img/hblad.png'
import ad from '../../assets/img/ad.jpg'
import zpad from '../../assets/img/zpad.png'
import { OccupationType, getFindPeopleList, WageRangeState, WorkYearState, EducationState, GetQueryString } from '../../assets/js/domains'
import Noview from '../../components/noview'
export default {
  name: 'Job',
  components: { Header, Footer, Noview },
  directives: {},
  data: function () {
    return {
      hangyeLoading: true,
      sexLoading: true,
      WageLoading: true,
      yearLoading: true,
      xueliLoading: true,
      sexlist: [
        { value: '不限', label: '不限' },
        { value: 1, label: '男' },
        { value: 2, label: '女' },
      ],
      xuelilist: [],
      Wagelist: [],
      yearlist: [],
      total: 0,
      agelist: [
        { value: '不限', label: '不限' },
        { value: '18-25', label: '18-25' },
        { value: '26-35', label: '26-35' },
        { value: '36-45', label: '36-45' },
        { value: '46-55', label: '46-55' },
        { value: '55-65', label: '55以上' },
      ],
      search: { pageNum: 1, pageSize: 36, specialty: '', experience: '', education: '', sex: '', age: '', name: '' },
      options: [],
      hangyelist: [],
      peopleList: [],
      mt: mt,
      hblad: hblad,
      ad: ad,
      zpad: zpad
    }
  },
  created: function () {
    document.title = '找人才'
    if (GetQueryString('title')) {
      this.search.name = decodeURI(GetQueryString('title'))
    }
    if (GetQueryString('industry')) {
      this.search.industry = decodeURI(GetQueryString('industry'))
      this.search.specialty = decodeURI(GetQueryString('industry'))
    }
    // this.getAgeList()
  },
  computed: {},
  mounted: function () {
    this.getpeopleList()
    this.getOccupationType()
    // this.getSexState()
    this.getWageRangeState()
    this.getWorkYearState()
    this.getEducationState()
  },
  methods: {
    getEducationState: function () {
      const _this = this
      EducationState().then(function (res) {
        _this.xueliLoading = false
        if (res.code === 200) {
          _this.xuelilist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    // getAgeList: function () {
    //   const _this = this
    //   getAgeList().then(function (res) {
    //     if (res.code === 200) {
    //       res.data.push({id: 1, age: "不限"})
    //       _this.agelist = res.data
    //     }
    //   })
    // },
    // getSexState: function () {
    //   const _this = this
    //   SexState().then(function (res) {
    //     _this.sexLoading = false
    //     if (res.code === 200) {
    //       res.data.push({id: -1,subTypeName: "不限"});
    //       _this.sexlist = res.data
    //     } else {
    //       _this.$alert(res.msg, '提示', {
    //         confirmButtonText: '确定',
    //         callback: function () {

    //         }
    //       })
    //     }
    //   })
    // },
    getWageRangeState: function () {
      const _this = this
      WageRangeState().then(function (res) {
        _this.WageLoading = false
        if (res.code === 200) {
          _this.Wagelist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    getWorkYearState: function () {
      const _this = this
      WorkYearState().then(function (res) {
        _this.yearLoading = false
        if (res.code === 200) {
          _this.yearlist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {

            }
          })
        }
      })
    },
    getOccupationType: function () {
      const _this = this
      OccupationType().then(function (res) {
        _this.hangyeLoading = false
        if (res.code === 200) {
          res.data.unshift({ id: -1, name: '不限' })
          _this.hangyelist = res.data
        } else {
          _this.$alert(res.msg, '提示', {
            confirmButtonText: '确定',
            callback: function () {
            }
          })
        }
      })
    },
    // 找人才列表
    getpeopleList: function (page) {
      const _this = this
      if (page) {
        this.search.pageNum = page
      }
      const params = Object.assign({}, this.search)
      params.specialty = Array.isArray(params.specialty) ? params.specialty.slice().pop() : this.search.industry
      for (const key in params) {
        params[key] = params[key] == '不限' ? '' : (params[key] || '')
      }
      if (params.experience == '在校生/应届生') {
        params.experienceBegin = 0
        params.experienceEnd = 1
      } else {
        params.experienceBegin = parseInt(params.experience.split('-')[0])
        params.experienceEnd = parseInt(params.experience.split('-')[1])
        params.experienceBegin = isNaN(params.experienceBegin) ? '' : params.experienceBegin
        params.experienceEnd = isNaN(params.experienceEnd) ? '' : params.experienceEnd
      }
      params.ageBegin = parseInt(params.age.split('-')[0])
      params.ageEnd = parseInt(params.age.split('-')[1])
      params.ageBegin = isNaN(params.ageBegin) ? '' : params.ageBegin
      params.ageEnd = isNaN(params.ageEnd) ? '' : params.ageEnd
      delete params.age
      delete params.experience

      getFindPeopleList(params).then(function (res) {
        if (res.code === 200) {
          _this.peopleList = (res.data.content || []).filter(item => item.id)
          if (_this.search.pageNum === 1 && _this.peopleList.length === 0) {
            _this.total = 0
          } else {
            _this.total = res.data.totalElements
          }
        }
      })
    },
    onPageChange (value) {
      this.search.pageNum = value
      this.getpeopleList()
    },
    todetail: function (id) {
      window.location.href = 'personResume.html?id=' + id
    },
    tocompany: function (id) {
      window.location.href = 'companyDetail.html?id=' + id
    },
    formatYear: function (item) {
      if (!item || !item.workYear) {
        return '未知'
      }
      if (item.experience <= 0) {
        return '刚参加工作'
      }
      return `已工作${item.experience}年`
    }
  }
}
</script>
<style lang="less" scoped>
  @import "../../assets/css/job";
</style>
<style lang="less">
.searchsele {
  margin-right: 0 !important;
  width: 230px;
  .el-select .el-input__inner,.el-cascader .el-input__inner{border:none; color: #1e1e1e;font-size: 20px;}
  // .el-input__suffix{left: 0;}

  .el-cascader input::-webkit-input-placeholder { color:#1e1e1e;}
  .el-cascader :-moz-placeholder { color:#1e1e1e;}
  .el-cascader ::-moz-placeholder { color:#1e1e1e;}
  .el-cascader input:-ms-input-placeholder { color:#1e1e1e;}
  .el-cascader input::-ms-input-placeholder { color:#1e1e1e;}

  .el-select input::-webkit-input-placeholder { color:#1e1e1e;}
  .el-select :-moz-placeholder { color:#1e1e1e;}
  .el-select ::-moz-placeholder { color:#1e1e1e;}
  .el-select input:-ms-input-placeholder { color:#1e1e1e;}
  .el-select input::-ms-input-placeholder { color:#1e1e1e;}

  .el-icon-arrow-up:before,
  .el-icon-arrow-up.is-reverse:before{content:"\e78f"; color:#1e1e1e}
  .el-icon-arrow-down:before,
  .el-icon-arrow-down.is-reverse:before{content:"\e790"; color:#1e1e1e}
}
.popSelect{
  .el-select-dropdown__wrap{max-height: 500px;}
  .el-select-dropdown__item{height: 60px; line-height: 60px;font-size: 18px;color: #1E1E1E;}
  .el-select-dropdown__item.hover,
  .el-select-dropdown__item.selected,
  .el-select-dropdown__item:hover{background-color: #20A2B2; color: #fff;}

  .el-cascader-menu__wrap{height: 500px;}
  .el-cascader-node{height: 60px; line-height: 60px;font-size: 18px;color: #1E1E1E;}
  .el-cascader-node:not(.is-disabled):hover,
  .el-cascader-node.is-active,
  .el-cascader-node.in-active-path{background-color: #20A2B2; color: #fff;}
  .el-icon-arrow-right:before{content: "\e791";}
  .el-cascader-node.is-active .el-icon-check{display: none;}
}

</style>
